<template>
  <div>
    <!-- 主要内容部分开始 -->
    <div class="content">
      <!-- 波浪图开始 -->
      <div class="waveImg currency">
        <!-- 题目部分开始 -->
        <span>商务合作</span>
        <!-- 题目部分结束 -->
      </div>
      <!-- 波浪图结束 -->

      <!-- 商务合作开头部分开始 -->
      <div class="coopeCon currency">
        <!-- 面包屑/内容部分开始 -->
        <div class="coopeTitle currency">
          <!-- 面包屑部分开始 -->
          <div class="crumbs">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                <a style="color:#fff" href="/details#/index">网站首页</a>
              </el-breadcrumb-item>
              <el-breadcrumb-item>
                <span style="color:#fff">活动管理</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- 面包屑部分结束 -->

          <!-- 内容部分开始 -->
          <div class="cruCon">
            <!-- 包裹层开始 -->
            <div>
              <!-- 小块包裹层开始 -->
              <div v-for="(item, index) in headObj" :key="index">
                <span>{{ item.title }}</span>
                <span>{{ item.content }}</span>
              </div>
              <!-- 小块包裹层结束 -->
            </div>
            <!-- 包裹层结束 -->
          </div>
          <!-- 内容部分结束 -->
        </div>
        <!-- 面包屑/内容部分结束 -->
      </div>
      <!-- 商务合作开头部分结束 -->

      <!-- 商务合作类型开始 -->
      <div class="businessType currency">
        <!-- 标题开始 -->
        <span class="titleText_1 titleText">商务合作类型</span>
        <span class="titleText_2 titleText">主要分为 大数据公司合作、检测中心合作、融资合作、大客户定制合作、广告合作、数据中心共享合作</span>
        <!-- 标题结束 -->

        <!-- 内容部分开始 -->
        <div class="content currency">

            <!-- 分块部分开始 -->
            <div class="block" v-for="(item, index) in blockArr"  :key="index">
                <!-- <img :src="item.url" alt="..."> -->
                <!-- <img :src="item.url" alt="123123123"> -->
                <span>{{ item.title }}</span>
                <span>{{ item.content }}</span>
                <el-button type="danger" round style="background-color: transparent"><span style="color:red">联系我们</span></el-button>
            </div>
            <!-- 分块部分结束 -->

        </div>
        <!-- 内容部分结束 -->
      </div>
      <!-- 商务合作类型结束 -->
    </div>
    <!-- 主要内容部分结束 -->
  </div>
</template>

<style lang="less" scoped>
// 主要内容部分开始
.content {
  // 波浪图开始
  .waveImg {
    width: 100%;
    height: 150px;
    left: 0;
    background-image: url("../assets/fen/形状 3.png");
    background-size: 100% 100%;
    text-align: center;
    line-height: 200px;

    span {
      color: white;
      font-size: 40px;
      font-weight: 800;
      letter-spacing: 5px;
    }
  }
  // 波浪图结束

  // 商务合作开头部分开始
  .coopeCon {
    height: 450px;
    width: 100%;
    left: 0;
    top: -50px;
    z-index: -1;
    background-image: url("../assets/fen/矩形 2332.png");
    background-size: 100% 100%;

    // 面包屑/内容部分开始
    .coopeTitle {
      width: 60%;
      left: 20%;
      height: 350px;
      top: calc(100% - 380px);
      //   background-color: red;

      //   面包屑部分开始
      .crumbs {
        width: 100%;
        height: 200px;
        position: absolute;
        top: 30px;
        .el-breadcrumb {
          font-size: 17px;
        }
      }
      //   面包屑部分结束

      // 内容部分开始
      .cruCon {
        width: 100%;
        height: 200px;
        position: absolute;
        bottom: 40px;

        // 包裹层开始
        & > div {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          // 小块包裹层开始
          & > div {
            width: 33%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            & > span:nth-child(1) {
              color: red;
              font-size: 30px;
              font-weight: 700;
              letter-spacing: 3px;
            }

            & > span:nth-child(2) {
              color: #fff;
              font-size: 15px;
              font-weight: 700;
              letter-spacing: 3px;
              margin-left: -20px;
            }
          }
          // 小块包裹层结束
        }
        // 包裹层结束
      }
      // 内容部分结束
    }
    // 面包屑/内容部分结束
  }
  // 商务合作开头部分结束

  //   商务合作类型开始
  .businessType {
    // height: 1500px;
    // background-color: gray;
    padding-bottom: 80px;

    //   标题开始
    .titleText {
      text-align: center;
      display: block;
    }

    .titleText_1 {
        font-size: 30px;
        letter-spacing: 5px;
    }

    .titleText_2 {
        font-size: 10px;
        letter-spacing: 1px;
        color: #9E9E9E;
        margin-top: 10px;
    }
    //   标题结束

    // 内容部分开始
    .content {
        // height: 1000px;
        width: 70%;
        top: 50px;
        left: 50%;
        transform: translate(-50%, 0);
        // background-color: darkorange;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;

        // 分块部分开始
        .block {
            width: 25%;
            height: 400px;
            background-image: url('../assets/fen/61.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: relative;
            // box-sizing: border-box;
            border: 40px solid transparent;
            float: left;
            overflow: hidden;
            position: relative;

            &>img {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
            
            &>span {
                position: absolute;
                display: block;
                text-align: center;
                color: #fff;
                width: 60%;
                left: 20%;
                letter-spacing: 1px;
                line-height: 30px;
            }

            &>span:nth-child(1) {
                top: 50px;
            }

            &>span:nth-child(2) {
                top: 100px;
                color: #BCBEC0;
                font-size: 13px;
                 line-height: 20px;
            }

            .el-button {
                position: absolute;
                bottom: 10%;
                left: 50%;
                transform: translate(-50%);
            }
        }
        // 分块部分结束
    }
    // 内容部分结束
  }
  //   商务合作类型结束
}
// 主要内容部分结束
</style>

<script>
import firstUrl from '../assets/fen/58.png'
import firstUrl53 from '../assets/fen/53.png'
export default {
  data() {
    return {
      // 开头部分单位数据
      headObj: [
        {
          title: "2000﹢",
          content: "合作单位",
        },
        {
          title: "5000﹢",
          content: "覆盖城市",
        },
        {
          title: "97﹢",
          content: "每日订单",
        },
      ],
    //   商务合作部分数据
        blockArr: [
            {
                title: "大数据公司合作",
                url: firstUrl,
                content: "我们公司诚信与大公司合作 共创一个和谐 专业的平台",
            },
            {
                title: "检测中心合作",
                url: firstUrl53,
                content: "我们公司诚信与检测中心合作 共创一个和谐 专业的平台",
            },
            {
                title: "融资合作",
                url: "url(../assets/fen/组 258.png)",
                content: "我们公司诚信与融资合作 共创一个和谐 专业的平台",
            },
            {
                title: "大客户定制合作",
                url: "url(../assets/fen/58.png)",
                content: "我们公司诚信与大客户定制合作 共创一个和谐 专业的平台",
            },
            {
                title: "广告合作",
                url: "url(../assets/fen/9599.png)",
                content: "我们公司诚信与广告合作 共创一个和谐 专业的平台",
            },
            {
                title: "数据中心共享合作",
                url: "url(../assets/fen/16841.png)",
                content: "我们公司诚信与数据中心共享合作 共创一个和谐 专业的平台",
            }
        ]
    };
  },
};
</script>